<template>
    <view class="choose-merchant">
        <!-- 显示景点 -->
        <view class="default-merchant" @click="chooseScenicsport">
            <view class="position"></view>
            <view>{{ merchantName ? merchantName : '请选择景点' }}</view>
            <view class="arrow" :class="isShowMerchantWrap ? 'upArrow' : ''"></view>
        </view>
        <!-- 选择景点 -->
        <view class="merchant-wrap" v-if="isShowMerchantWrap">
            <view class="item-wrap">
                <view class="item" :class="item.id == merchantId ? 'itemSelected' : ''" v-for="(item, index) in merchantList" :key="item.id" @click="selectMerchant(item)">
                    {{ item.name }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            merchantName: '', // 选择商家名字
            merchantId: '', // 选择商家ID
            isShowMerchantWrap: false
        };
    },
    props: {
        merchantList: {
            type: Array,
            required: true
        },
        showSelectMerchant: {
            type: Boolean,
            default: false
        },
        currentMerchantId: {
            type: String,
            default: ''
        },
        currentMerchantName: {
            type: String,
            default: ''
        }
    },
    methods: {
        chooseScenicsport() {
            this.isShowMerchantWrap = !this.isShowMerchantWrap;
        },
        // 选择商家
        selectMerchant(item) {
            this.merchantName = item.name;
            this.merchantId = item.id;
            setTimeout(() => {
                this.isShowMerchantWrap = false;
            }, 300);
            this.$emit('merchantChange', item);
        }
    },
    watch: {
        currentMerchantId: {
            handler(newVal, oldVal) {
                this.merchantId = newVal;
            },
            immediate: true
        },
        currentMerchantName: {
            handler(newVal, oldVal) {
                this.merchantName = newVal;
            },
            immediate: true
        },
        showSelectMerchant: {
            handler(newVal, oldVal) {
                this.isShowMerchantWrap = newVal;
            },
            immediate: true
        }
    }
};
</script>

<style lang="less" scoped>
.choose-merchant {
    position: relative;

    .default-merchant {
        display: flex;
        margin: 40rpx 40rpx 0;
        font-size: 30rpx;
        font-weight: 700;
        align-items: center;
        line-height: 30rpx;

        .position {
            width: 45rpx;
            height: 40rpx;
            margin: 0 15rpx 0 0;
            background: url('@/static/tabBar/index/position.png');
            background-size: cover;
        }

        .arrow {
            width: 24rpx;
            height: 15rpx;
            margin-left: 12rpx;
            background: url('@/static/tabBar/index/rightArr.png');
            background-size: cover;
            transform: rotate(180deg);
        }

        .upArrow {
            transform: rotate(0);
        }
    }

    .merchant-wrap {
        position: absolute;
        width: 100%;
        height: calc(100vh - 70rpx);
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        .item-wrap {
            position: absolute;
            border-radius: 0 0 10rpx 10rpx;
            background: #fff;
            padding: 50rpx 30rpx 0;
            max-height: calc(100vh - 70rpx);
            overflow: scroll;
            display: flex;
            width: 100%;
            box-sizing: border-box;
            flex-wrap: wrap;
            z-index: 10;
            .item {
                background-color: #f6f6f6;
                border-radius: 10rpx;
                padding: 26rpx 20rpx;
                color: #262832;
                font-size: 28rpx;
                line-height: 28rpx;
                margin: 0 30rpx 30rpx 0;
            }

            .itemSelected {
                background-color: #e7fff2;
                color: #08c160;
            }
        }
    }
}
</style>
